<template>
  <div class="page-cont">
    <van-nav-bar
      title="任务详情"
      left-arrow
      @click-left="$router.go(-1)"
    />
    <div
      class="list"
    >
      <van-cell
        title="当前梁片"
        size="large"
        v-if="!prebridge"
      >
        <span
          style="color: #333;"
          v-if="taskList[0]"
        >{{ taskList[0].beamNo }}</span>
      </van-cell>
      <van-cell
        title="当前梁片"
        size="large"
        v-else-if="prebridge && (task == 'qr' || task == 'view')"
      >
        <span style="color: #333;">{{ prebridge.beamNo }}</span>
      </van-cell>

      <div
        class="bridge-info"
        v-else
      >
        <div class="text">
          <div class="title">
            {{ prebridge.beamNo }}
          </div>
          <div class="item">
            生产线：{{ prebridge.beltlineName }}
          </div>
          <div class="item">
            桥幅号:{{ prebridge.bridgeSiteNo == 1 ? '左幅' : '右幅' }}
          </div>
          <div class="item">
            桥墩号:{{ prebridge.pierNo }}
          </div>
          <div class="item">
            板编号:{{ prebridge.boardNo }}
          </div>
          <div class="item">
            T梁类型:{{ prebridge.tbType == 1 ? '边梁' : '中梁' }}
          </div>
          <div class="item">
            T梁长度:{{ prebridge.length }}(cm)
          </div>
          <div class="item">
            T梁宽度:{{ prebridge.width }}(cm)
          </div>
        </div>
        <div class="info">
          <div
            class="status"
            :status="prebridge.prodStatus"
          >
            {{ prebridge.prodStatus == 1 ? '未开始' : prebridge.prodStatus == 2 ? '进行中' : '已完成' }}
          </div>
          <div class="qrcode">
            <van-icon
              name="qr"
              @click="showQrcode(prebridge.id, prebridge.beamNo)"
            />
          </div>
        </div>
      </div>

      <div
        class="task-item"
        v-for="item in taskList"
        :key="item.id"
        :id="'task_item_' + item.procedureOrder"
      >
        <div class="title">
          {{ item.procedureName }}
          <span
            class="status"
            :status="item.status"
          >{{ {0: '未开始', 1: '生产中', 2: '已完成'}[item.status] }}</span>
        </div>
        <template v-if="task == 'task' || task == 'qr' || task == 'view'">
          <div
            class="time"
            v-if="item._current == 1 && task !== 'view'"
          >
            <time-select
              v-model="now"
              title="开始时间"
            />
            <van-cell
              title="结束时间"
              :border="false"
            />
          </div>
          <div
            class="time"
            v-if="item._current == 2 && task !== 'view'"
          >
            <van-cell
              title="开始时间"
              :border="false"
            >
              <span style="color: #333;">{{ item.startTime | timeDate }}</span>
            </van-cell>
            <time-select
              v-model="now"
              title="结束时间"
            />
          </div>
          <div
            class="time"
            v-if="item.status == 2 || task == 'view'"
          >
            <van-cell
              title="开始时间"
              :border="false"
            >
              <span
                style="color: #333;"
                v-if="item.startTime"
              >{{ item.startTime | timeDate }}</span>
            </van-cell>
            <van-cell
              title="结束时间"
              :border="false"
            >
              <span
                style="color: #333;"
                v-if="item.endTime"
              >{{ item.endTime | timeDate }}</span>
            </van-cell>
          </div>
        </template>

        <template v-else-if="task == 'plan' || task == 'pre'">
          <div class="info-item">
            <div class="label">
              开始时间：
            </div>
            <div
              class="value"
              v-if="item.startTime"
            >
              {{ item.startTime | timeDate }}
            </div>
          </div>
          <div class="info-item">
            <div class="label">
              结束时间：
            </div>
            <div
              class="value"
              v-if="item.endTime"
            >
              {{ item.endTime | timeDate }}
            </div>
          </div>
          <div class="info-item">
            <div class="label">
              责任人：
            </div>
            <div
              class="value"
            />
          </div>
          <div class="info-item">
            <div class="label">
              用时：
            </div>
            <div
              class="value"
              v-if="item.startTime && item.endTime"
            >
              {{ comparisonTime(item.startTime, item.endTime) }}
            </div>
          </div>
        </template>
      </div>
      <van-empty
        v-if="!taskList.length"
        description="任务暂未下达"
      />
    </div>
    <van-button
      class="bottom"
      type="info"
      block
      @click="setTaskData"
      v-if="(task == 'task' || task == 'qr') && taskList.length"
    >
      提交
    </van-button>
  </div>
</template>

<script>
import dayjs from 'dayjs'

export default {
  name: "TaskSetPage",
  data() {
    return {
      now: dayjs().format('YYYYMMDDHHmmss'),
      prebridge: null,
      current: null,
      type: 'task',
      id: '',
      taskList: [],
      qrcodeImage: ''
    };
  },
  created() {
    this.task = this.$route.query.type || 'task'; // 任务类型
    // if (type == 'plan') { // 日计划点击进入
    //   // 只能查看不能编辑
    // } else if (type == 'qr') { // 扫描预制梁二维码进入
    //   // 可编辑 改完当前工序 跳转到当前工序对应的任务管理页面
    // } else if (type == 'pre') { // 预制梁页面点击进入
    //   // 只能查看不能编辑
    // } else if (type == 'task') { // 预制梁页面点击进入
    //   // 只能查看不能编辑
    // }
    if (this.task === 'task') {
      this.id = this.$route.params.id; // 任务ID
      console.log('获取任务详情')
      this.getTaskList()
    } else {
      let pre_id = this.$route.params.id; // 预制梁ID
      this.getPrebridgeData(pre_id)
    }
    
  },
  methods: {
    showQrcode(id, name) {
      this.$router.push({
        path: '/prebridge/qr/' + id,
        query: {name}
      })
    },
    comparisonTime(start, end) {
      let startV = new Date(this.$options.filters.timeDate(start));
      let endV = new Date(this.$options.filters.timeDate(end));
      let differ = endV.getTime() - startV.getTime();

      // 转化为文字格式
      if (differ < 3600000) {
        // 转化为多少分钟 最小一分钟
        return Math.ceil(differ / 60000) + '分钟';
      } else if (differ < 86400000) {
        // 转化为几小时积分
        return Math.ceil(differ / 3600000) + '小时' + Math.ceil((differ % 3600000) / 60000) + '分钟';
      } else {
        // 转化为多少天 最小一天
        return Math.ceil(differ / 86400000) + '天';
      }

    },
    async getPrebridgeData(pre_id) {
      this.$toast.loading({  message: '加载中...', forbidClick: true });
      // 获取预制梁详情
      let prebridge = await this.api.GET_PREBRIDGE_DETAIL(pre_id)
      this.$set(this, 'prebridge', prebridge)

      // 获取预制梁关联任务
      let res = await this.api.GET_PREBRIDGE_TASK_LIST(pre_id).catch(() => {
        return {Task_mng_detail: [], id: ''}
      })
      this.$toast.clear()
      this.id = res.id; // 任务ID
      this.handleTask(res.Task_mng_detail)
    },
    async getTaskList() {
      this.$toast.loading({  message: '加载中...', forbidClick: true });
      let res = await this.api.GET_TASK_DETAILS(this.id)
      this.$toast.clear()
      this.handleTask(res)
    },
    handleTask(res) {
      res = res.sort((a, b) => a.procedureOrder - b.procedureOrder)
      let current = null
      res = res.map(item => {
        if (current) return item
        if (!item.startTime || !item.endTime) {
          current = item
          item._current = !item.startTime ? 1 : 2
        }
        return item
      })
      this.$set(this, 'current', current)
      this.$set(this, 'taskList', res)
      if (this.task == 'task' || this.task == 'qr' || this.task == 'view') {
        this.$nextTick(() => {
          let el = document.getElementById('task_item_' + current.procedureOrder)
          el.scrollIntoView()
        })
      }
    },
    async setTaskData() {
      this.$toast.loading({  message: '加载中...', forbidClick: true });
      await this.api.UPDATE_TASK_DATA({id: this.id, status: this.current._current, time: this.now})
      this.$toast.clear()
      // this.getTaskList()

      if (this.task == 'qr') {
        this.$router.replace('/task/' + this.current.procedureName)
      } else {
        this.$router.back()
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.page-cont {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #f5f5f5;
  .list {
    flex: 1;
    overflow: hidden;
    overflow-y: auto;
    padding-bottom: 10px;
    .bridge-info {
      display: flex;
      padding: 15px;
      margin-bottom: 10px;
      background: #fff;

      .text {
        flex: 1;
        width: 0;

        .title {
          font-size: 16px;
          color: #333;
          line-height: 30px;
        }

        .item {
          font-size: 14px;
          color: #999;
          margin: 5px 0;
        }
      }

      .info {
        padding-left: 15px;
        display: flex;
        flex-direction: column;
        align-items: center;

        .status {
          line-height: 30px;
          color: #5c8ccf;
          &[status="1"] {
            color: #ba3131;
          }
          &[status="2"] {
            color: #e4b25e;
          }
          &[status="2"] {
            color: #13ae1d;
          }
        }

        .qrcode {
          flex: 1;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 24px;
          color: #5185c8;
          font-weight: 600;
          text-shadow: 0 0 1px #5185c8;
        }
      }
    }
    .task-item {
      margin-top: 15px;
      background: #fff;
      .title {
        padding: 10px 15px 10px 30px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
        font-size: 16px;
        font-weight: 600;
        &::before{
          position: absolute;
          content: '';
          display: block;
          width: 4px;
          height: 20px;
          top: 50%;
          margin-top: -10px;
          background: #4b8fe7;
          left: 15px;
          border-radius: 2px;
        }
        .status {
          font-size: 14px;
          &[status="0"] {
            color: #d9001b;
          }
          &[status="1"] {
            color: #f0a145;
          }
          &[status="2"] {
            color: #5483c1;
          }
        }
      }
      .info-item {
        padding: 0 15px 8px;
        display: flex;
        align-items: center;
        font-size: 14px;
        .label {
          color: #999;
        }
        .value {
          color: #666;
          margin-left: 5px;
        }
      }
      ::v-deep {
        .van-cell{
          padding: 5px 15px;
          .van-cell__value {
            color: #333;
          }
        }
      }
    }
  }
}
</style>
